<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-date"></i> 订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cantainer">
      <el-table style="width: 100%;"
                :data="ordersList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      >
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column label="菜名" prop="foodname" width="150">
        </el-table-column>
        <el-table-column label="价格" prop="price" width="100">
        </el-table-column>
        <el-table-column label="点餐人" prop="username" width="100">
        </el-table-column>
        <el-table-column label="时间" prop="createtime" width="100">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ordersList.length">
      </el-pagination>
    </div>



  </div>
</template>

<script>
import {qryInfoOrders} from "@/network/infoorders";

export default {
  name: "All",
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 10,    //    每页的数据
      ordersList: [],
      dialogFormVisible: false,
      dialogData:{},
    }
  },
  created() {
    this.handleUserList()
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
    handleUserList() {
      qryInfoOrders().then(res => {
        this.ordersList = res.data;
        console.log(res.data);
      });
    },
    closeDialog() {
      this.handleUserList()
    }
  }
}
</script>

<style scoped>
.right {
  display: flex;
  justify-content: flex-end ;
}
</style>
